<template>
  <div>
    <van-card
      v-for="item in newsList"
      :key="item.id"
      :title="item.title"
      :thumb="item.img_url"
      @click="toNewsInfoPage(item.id)"
    >
      <template #desc>
        <span class="pubTime">发表时间：{{ item.add_time | dateFormat }}</span>
      </template>
      <template #tags>
        <span class="clickNum">点击：{{ item.click }}</span>
      </template>
    </van-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      newsList: []
    }
  },
  created() {
    this.getNewsList()
  },
  methods: {
    async getNewsList() {
      const { data: res } = await this.$http.get('/api/getnewslist')
      console.log(res)
      if (res.status !== 0) return this.$toast.fail('获取新闻列表失败')
      this.newsList = res.message
      console.log(this.newsList)
    },
    toNewsInfoPage(id) {
      this.$router.push(`/news/detail/${id}`)
    }
  }
}
</script>

<style lang="less" scoped>
.van-card {
  padding: 10px 5px;
  height: 70px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  .van-card__title {
    margin-top: 5px;
    font-size: 14px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  .van-card__thumb {
    width: 50px;
    height: 50px;
  }
  .van-ellipsis {
    display: inline-block;
    margin-top: 8px;
    color: #226aff;
  }
  .van-card__content {
    height: 70px !important;
  }
}
.pubTime {
  float: left;
  margin-top: 8px;
  color: #226aff;
}
.clickNum {
  float: right;
  margin-top: 8px;
  margin-right: 5px;
  color: #226aff;
}
</style>
